<template>
  <PageContainer id="bizDashboard" title="业务大盘">
    <template #extra>
      <a-space size="large">
        <a-input
          v-model:value="searchInput"
          :allow-clear="true"
          placeholder="请输入过滤条件"
          @change="searchInputChange"
        >
          <template #suffix>
            <SearchOutlined />
          </template>
        </a-input>
        <a-select
          v-model:value="selectedChartGroup"
          style="width: 200px"
          placeholder="请选择分组"
          :options="chartGroupOptions"
          @change="initGroupChartList"
        ></a-select>
        <a-select v-model:value="selectedChartColSpan" style="width: 200px">
          <a-select-option :value="2">一行两张统计图</a-select-option>
          <a-select-option :value="1">一行一张统计图</a-select-option>
        </a-select>
        <a-button
          v-if="editable"
          type="primary"
          @click="$emit('showEditTable', {}, selectedChartGroup, chartGroupOptions)"
        >
          添加统计图
        </a-button>
      </a-space>
    </template>
    <a-spin size="large" :spinning="spinning">
      <a-list :grid="{ gutter: [16, 16], column: selectedChartColSpan }" :data-source="chartList" :pagination="true">
        <template #renderItem="{ item }">
          <a-list-item :key="item.id">
            <BizDashboardEChart
              :recode="item"
              :col-span="selectedChartColSpan"
              @full-screen="fullScreen(item)"
              @copy-recode="copyRecode(item)"
              @show-edit-table="$emit('showEditTable', item, selectedChartGroup, chartGroupOptions)"
              @delete-recode="deleteRecode(item)"
            />
          </a-list-item>
        </template>
      </a-list>
    </a-spin>
  </PageContainer>
</template>

<script lang="ts" setup>
import { PageContainer as PageContainer } from '@ant-design-vue/pro-layout';
import BizDashboardEChart from '@/views/bizDashboard/components/BizDashboardEChart.vue';
import BizDashboardEChartFullScreen from '@/views/bizDashboard/components/BizDashboardEChartFullScreen.vue';
import type { Chart, ChartGroup } from '@/api/bizDashboard/bizDashboard';
import * as bizDashboardApi from '@/api/bizDashboard/bizDashboard';
import { message, Modal, type SelectProps } from 'ant-design-vue';
import { useStoreGlobalStore } from '@/store';
import { SearchOutlined } from '@ant-design/icons-vue';
import { Base64 } from 'js-base64';
//权限判断
const editable = useStoreGlobalStore().state.loginUser.role > 0;

const props = defineProps<{
  group: number;
}>();

const emits = defineEmits<{
  (e: 'showEditTable', editRecode: Chart, group: number, groupOptions: SelectProps['options']): void;
}>();

//统计图分组
let selectedChartGroup = ref();
const chartGroupOptions = ref<SelectProps['options']>();
getChartGroupOptions();

function getChartGroupOptions() {
  bizDashboardApi.chartGroup().then(jsonResult => {
    if (!jsonResult) {
      return;
    }
    chartGroupOptions.value = jsonResult.result.map((item: ChartGroup) => {
      return {
        label: item.bizGroup,
        value: item.bizGroupValue,
      };
    });
    selectedChartGroup.value = props.group;
  });
}

//统计图列数
let selectedChartColSpan = ref(2);

//分组内的所有统计图
let chartList = ref<Chart[]>([]);

onBeforeMount(() => {
  initGroupChartList(props.group);
});

//加载中
let spinning = ref(false);
//过滤
let searchInput = ref();
let groupChartList: Chart[] = [];

function initGroupChartList(bizGroupValue: number = selectedChartGroup.value) {
  spinning.value = true;
  const params = { bizGroupValue: bizGroupValue };
  bizDashboardApi.chartList(params).then(jsonResult => {
    spinning.value = false;
    if (!jsonResult) {
      return;
    }
    chartList.value = jsonResult.result;
    groupChartList = jsonResult.result;
    searchInput.value = '';
  });
}

//过滤
function searchInputChange() {
  if (!searchInput.value) {
    //所有
    chartList.value = groupChartList;
    return;
  }
  chartList.value = groupChartList.filter(item => {
    return item.chartTitle.includes(searchInput.value);
  });
}

//最大化
function fullScreen(recode: Chart) {
  Modal.success({
    transitionName: '',
    maskTransitionName: '',
    title: () => {},
    content: h(BizDashboardEChartFullScreen, { recode: recode, colSpan: 1 }),
    icon: () => {},
    okText: '关闭',
    width: '100%',
    closable: false,
    centered: false,
    style: 'top: 8px;',
    wrapClassName: 'full-modal ',
  });
}

//复制
function copyRecode(recode: Chart) {
  let copyRecode: Chart = {
    bizGroupValue: recode.bizGroupValue,
    chartTitle: recode.chartTitle,
    chartConfig: recode.chartConfig,
  };

  emits('showEditTable', copyRecode, selectedChartGroup.value, chartGroupOptions.value);
}

//删除
function deleteRecode(recode: Chart) {
  //加密
  let base64FormState = Base64.encode(JSON.stringify(recode));
  message
    .loading('删除中...')
    .then(async () => {
      await bizDashboardApi.deleteChart(base64FormState).then(async jsonResult => {
        if (!jsonResult) {
          return;
        }
        await initGroupChartList();
      });
    })
    .then(() => {
      message.success('删除成功！');
    });
}
</script>

<style lang="less">
.full-modal {
  .ant-modal {
    padding: 0 0 5px 0;
  }

  .ant-modal-body {
    padding: 0;
  }

  .ant-modal-confirm-btns {
    margin: 0 20px 5px 0;
  }
}
</style>
